<template>
  <div>
    <div style="width: 500px; margin: 80px 230px 0px 0px; padding-left: 470px">
    <el-row :gutter="24">
      <el-col :span="8"><img :src="imgurl" @click="getimg" height="60px" width="170px"></el-col>
      <el-col :span="8"><el-input placeholder="图片验证码" v-model="imagecode"></el-input></el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="10">
        <el-input placeholder="输入手机号" v-model="mobile"></el-input>
      </el-col>
      <el-button @click="send">{{message}}</el-button>
      <el-col :span="6">
        <el-input v-model="mcode" placeholder="手机验证码"></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="20">
        <el-button @click="submit">登陆</el-button>
      </el-col>
    </el-row>
    </div>
    <a :href="url">微博登录</a>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid'
export default {
  data(){
    return{
      uuid:"",
      imgurl:"",
      imagecode:"",
      mobile:"",
      message:"发送验证码",
      flag:false,
      mcode:"",
      time:10,
      url:""
    }
  },
  mounted(){
    this.getimg()
    this.tiao()
  },
  methods:{
    getimg(){
        this.uuid=uuid()
        this.imgurl="http://127.0.0.1:8000/getimg?uuid="+this.uuid
    },
    send(){
      var reg=/^1[3-9]\d{9}$/
      if(!reg.test(this.mobile)){
        alert("手机号格式不正确")
        return false
      }
      if(this.imagecode==""||this.imagecode==null){
        alert("必须输入图片验证码")
        return false
      }
      // 调用接口
      this.axios.post("/sms",{"imagecode":this.imagecode,"mobile":this.mobile,"uuid":this.uuid,'mcode':this.mcode})
      .then(res=>{
        // 发送成功将按钮变灰，内容变为倒计时，为0时恢复
        var data=res.data
        if (data.code==200){
          alert(res.data.msg)
            this.flag=true
            var t=setInterval(()=>{
              if(this.time==50){
                // 清除定时器
                clearInterval(t)
                this.message="发送验证码"
                this.flag=false
              }else{
                this.time--
                this.message=this.time+"秒"
                this.flag=true
              }
            },1000)
        }else{
          alert(data.msg)
        }
        // 失败时提示失败信息
      })
    },
    submit(){
      var data={"mobile":this.mobile,"mcode":this.mcode}
      this.axios.post("login",data)
      .then(res=>{
        if(res.data.code==200){
          localStorage.setItem("token",res.data.token)
          localStorage.setItem("userid",res.data.userid)
          alert(res.data.msg)
        }else{
          alert(res.data.msg)
        }
      })
    },
    tiao(){
            this.axios.get('tiao')
            .then(res=>{
                if(res.data.code==200){
                    this.url = res.data.url
                }
            })
        }
  }
}
</script>

<style>

</style>